<template>
    <div class="help-center">
      <div class="back-home-container">
        <el-button 
          type="primary" 
          plain 
          @click="$router.push('/')"
          class="back-home-btn"
        >
          返回首页
        </el-button>
      </div>
      <h1 class="page-title">帮助中心</h1>
      
      <section class="guide-section">
        <h2>论坛使用指南</h2>
        <div class="accordion">
          <div v-for="(item, index) in guides" :key="index" class="accordion-item">
            <div class="accordion-header" @click="toggleAccordion(index)">
              {{ item.title }}
              <span class="arrow" :class="{ 'up': activeIndex === index }"></span>
            </div>
            <div class="accordion-content" v-show="activeIndex === index">
              <p v-html="item.content"></p>
            </div>
          </div>
        </div>
      </section>
  
      <section class="faq-section">
        <h2>常见问题解答</h2>
        <div class="faq-list">
          <div v-for="(faq, index) in faqs" :key="index" class="faq-item">
            <div class="question">Q{{ index + 1 }}. {{ faq.question }}</div>
            <div class="answer">{{ faq.answer }}</div>
          </div>
        </div>
      </section>
  
      <section class="contact-section">
        <h2>联系我们</h2>
        <p>如果以上内容未能解决您的问题，请联系我们的客服团队：</p>
        <ul>
          <li>邮箱：support@example.com</li>
          <li>工作时间：周一至周五 9:00-18:00</li>
          <li>在线客服：页面右下角客服图标</li>
        </ul>
      </section>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const activeIndex = ref(null);
  
  const toggleAccordion = (index) => {
    activeIndex.value = activeIndex.value === index ? null : index;
  };
  
  const guides = ref([
    {
      title: '如何注册账号',
      content: '1. 点击右上角<b>注册</b>按钮<br>2. 填写邮箱和密码<br>3. 通过邮件验证激活账号'
    },
    {
      title: '如何修改密码',
      content: '1. 登录后进入个人中心<br>2. 在安全设置中选择修改密码<br>3. 验证原密码后设置新密码'
    },
    {
      title: '发帖规范指南',
      content: '1. 遵守社区发言规则<br>2. 禁止发布广告内容<br>3. 技术问题请提供详细重现步骤'
    }
  ]);
  
  const faqs = ref([
    {
      question: '如何搜索帖子？',
      answer: '在顶部导航栏输入关键词即可搜索相关帖子'
    },
    {
      question: '帖子被删除原因？',
      answer: '可能涉及敏感话题、广告内容或违反社区规则，详情请查阅用户协议'
    }
  ]);
  </script>
  
  <style scoped>
  .help-center {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .page-title {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
  }
  
  section {
    margin-bottom: 40px;
  }
  
  h2 {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #444;
  }
  
  /* Accordion styles */
  .accordion-item {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  
  .accordion-header {
    padding: 15px;
    background-color: #f8f9fa;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
  }
  
  .accordion-header:hover {
    background-color: #e9ecef;
  }
  
  .accordion-content {
    padding: 15px;
    background-color: white;
    border-top: 1px solid #eee;
  }
  
  .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #666;
    transition: transform 0.3s;
  }
  
  .arrow.up {
    transform: rotate(180deg);
  }
  
  /* FAQ styles */
  .faq-item {
    margin-bottom: 20px;
  }
  
  .question {
    font-weight: bold;
    margin-bottom: 8px;
    color: #2c3e50;
  }
  
  .answer {
    color: #666;
    line-height: 1.6;
  }
  
  .contact-section ul {
    list-style-type: none;
    padding-left: 0;
  }
  
  .contact-section li {
    margin-bottom: 8px;
    color: #555;
  }
  </style>